import {messages} from "share/common";
import React, { Component, PropTypes } from 'react';
import CompactInput from 'components/compact-input'
import { Form, Select, Input } from 'antd';
import Chooser from 'components/chooser'
import Searcher from 'components/searcher'
const FormItem = Form.Item;
const Option = Select.Option;

class Permission extends Component {

  range = [{
    value: 'ALL',
    text: messages('common.all')/*全部*/
  }, {
    value: 'PERSON_GROUP',
    text: messages('common-1.key420')/*人员组*/
  }, {
    value: 'DEPARTMENT',
    text: messages('common.department')/*部门*/
  }];

  state = {
    range: 'ALL',
    value: []
  };

  componentMap = {
    Chooser,
    Searcher
  };

  handleChangeRange = range => {
    this.setState({ range, value: [] }, this.dispatchOnChange)
  };

  componentDidMount() {
    this.setValue(this.props.value)
  }

  componentWillReceiveProps(nextProps) {
    if('value' in nextProps) {
      this.setValue(nextProps.value)
    }
  }

  setValue = value => {
    if(value) {
      const { parser } = this.props;
      this.setState(parser(value));
    }
  };

  renderValueComponent = () => {
    const { range, value } = this.state;
    const { componentProps, component, disabled } = this.props;
    switch(range) {
      case 'ALL':
        return <Input disabled value={messages('common-1.key421')/*通用*/}/>;
      case 'PERSON_GROUP':
        const personGroupProps = Object.assign({}, {
          type: 'user_group',
          labelKey: 'name',
          valueKey: 'id',
          showNumber: true,
          disabled
        }, componentProps[range]);
        const PersonGroupComp = this.componentMap[component[range]] || 'Chooser';
        return <PersonGroupComp
          value={value}
          onChange={this.onChangeValue}
          {...personGroupProps}
        />;
      case 'DEPARTMENT':
        const departmentProps = Object.assign({}, {
          type: 'department',
          labelKey: 'name',
          valueKey: 'departmentId',
          showNumber: true,
          disabled
        }, componentProps[range]);
        const DepartmentComp = this.componentMap[component[range]] || 'Chooser';
        return <DepartmentComp
          value={value}
          onChange={this.onChangeValue}
          {...departmentProps}
        />;
    }
  };

  onChangeValue = value => {
    this.setState({ value }, this.dispatchOnChange);
  };

  dispatchOnChange = () => {
    const { range, value } = this.state;
    const { onChange, formatter } = this.props;
    onChange && onChange(formatter({
      range, value
    }))
  };

  render() {
    const { formItemLayout, hidden, disabled, required } = this.props;
    const { range } = this.state;
    return (
      <div className='permission'>
        <FormItem {...formItemLayout} label={messages('common-1.key422')/*适用人员*/} required={required}>
          <CompactInput>
            <Select
              onChange={this.handleChangeRange}
              value={range}
              disabled={disabled}
              getPopupContainer={triggerNode => triggerNode.parentNode}
              style={{ width: '100%' }}
            >
              {
                this.range
                  .filter(item => hidden.indexOf(item.value) === -1)
                  .map(option => <Option key={option.value}>{option.text}</Option>)
              }
            </Select>
            {this.renderValueComponent()}
          </CompactInput>
        </FormItem>
      </div>
    );
  }

  static propTypes = {
    formItemLayout: PropTypes.object,
    onChange: PropTypes.func,
    hidden: PropTypes.array,
    component: PropTypes.object,
    componentProps: PropTypes.object,
    parser: PropTypes.func,
    formatter: PropTypes.func,
    disabled: PropTypes.bool
  };

  static defaultProps = {
    formItemLayout: {
      labelCol: { span: 8 },
      wrapperCol: { span: 10, offset: 1 }
    },
    onChange: () => {},
    hidden: [],
    component: {
      'PERSON_GROUP': 'Chooser',
      'DEPARTMENT': 'Chooser'
    },
    componentProps: {
      'PERSON_GROUP': {},
      'DEPARTMENT': {}
    },
    parser: value => value,
    formatter: value => value,
    disabled: false
  };
}

export default Permission;
